<script>
    import { onMount } from 'svelte';
    import { onResume, search } from 'svelte-stack-router';
    import Lazy from 'svelte-lazy';
  
    import { NavBar, Pagination } from '../components/base';
    import MiniPlayListCover from '../components/MiniPlayListCover.svelte';
    import { HammerLine } from 'svelte-remixicon';

    import { defaultResumableStore } from '../store/common';
    import { localGetJson, localSetJson, Toast } from '../utils/common';
    import { blur } from 'svelte/transition';
  
    $: playList = [];
    $: hasMore = false;
    $: offset = 0;
    $: paginationHeight = 0;
    $: searchObj = {};
    $: before = 0;
    $: manage = false;
    $: historyList = [];
    $: count = historyList.length

    let rightIcons = [
      {
        id: 'HammerLine',
        icon: HammerLine
      },
    ];
    let limit = 20;
    
    onResume(() => {
      if (!$defaultResumableStore) {
        playList = [];
        manage = false;
        hasMore = false;
        offset = 0;
        paginationHeight = 0;
        before = 0;
        searchObj = {};
        allMount();
      }
    });
    onMount(() => {
      allMount();
    });
    function allMount() {
      paginationHeight = document.documentElement.clientHeight || document.body.clientHeight - 120;
      historyList =  getHistoryList()
    }
    
    function getHistoryList(){
        let list = localGetJson('historyList', []) 
        if(!list.length){
          hasMore = false
        }
        return list
    }

    // 管理事件
    function rightClickFun(item){
      manage  = !manage
    }

    //删除歌单
    function deletePlay(item, list){
      // console.log('准备删除歌单',item)
      let index = list.indexOf(item)
      if(index > -1){
        list.splice(index,1);
        historyList = list
        localSetJson('historyList', list)
        Toast('已删除✅')
      }else{
        Toast('出错了😶')
      }
    }
  </script>
  
  <NavBar
    title={`收藏歌单(${count})`}
    {rightIcons}
    on:setRightIconClick={rightClickFun}
  />
  <div class="comment-page">
    <Pagination
      bottomHeight={70}
      {paginationHeight}
      items={historyList}
      let:item
      let:index
      {hasMore}
      grid={2}
      on:load={() => {
        if (hasMore) {
            offset = historyList.length;
            console.log('获取更多历史歌单')
          }
      }}
    >
     
        <div style="display:block; position: relative">
          <MiniPlayListCover
            name={item.name}
            coverImgUrl={item.coverImgUrl}
            id={item.id}
            width={150}
            playCount={item.playCount}
            trackCount={item.trackCount}
          /> 
          {#if manage}
          <button transition:blur="{{amount: 10}}" class="flatBtn absolute" 
          on:click={deletePlay(item, historyList)}>
              删除
          </button>  
          {/if}
        </div>

    
   
    </Pagination>
  </div>
  
  <style>
    .comment-page {
      padding: 50px 20px;
      font-size: 16px;
      color: #333333;
    }
    .flatBtn{
      background-color: transparent;
      color: white;
      font-size: large;
      border: 3px solid red;
      cursor: pointer;
      padding: 3px;
    }
    .flatBtn:active{
      transform: scale(1.1);
      transition-duration: 0.5s;
    }
    .absolute{
      position: absolute;
      width:100%;
      height: 80%;
      top:0;
      font-size: larger;
      background-color: #14141463;
      backdrop-filter: blur(5px);
    }
  </style>
  